$title-back:#f8fcfd;
$border:#e4e4e4;
$title-color:#617175;

$book-page-f-back:#1976D2; //翻书
$book-page-back:#b3e4ea;
$book-page-border:#909296;

$active-font-color:green;
$alarm-font-color:red;
$default-font-color:#a0a0a0;
.beauty {
	display: none;
}

.active-font {
	color: $active-font-color;
}

.default-font{
	color: $default-font-color;
}
.active-font1 {
	color: #ccc;
}

.alarm-font {
	color: $alarm-font-color;
}

.alarm-font1 {
	color: #ccc;
}

.one-part {
	width: 100%;
	border-radius: 8px;
	box-shadow: 0px 5px 10px $shadow-color;
}

.one-part:not(:first-child) {
	margin-top: 15px;
}

.one-part>.title-part {
	background-color: $title-back;
	border: 1px solid $border-color;
	color: $title-color;
	font-size: 15px;
	font-weight: bold;
	width: calc(100% - 30px);
	padding: 0 15px;
	height: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.one-part>.content-part {
	border: 1px solid $border-color;
	width: calc(100% - 20px);
	padding: 5px 10px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	border-top: none;
	min-height: 100px;
	margin: 0;
}

.one-part>.title-part>div {
	display: inline-flex;
	align-items: center;
}

.udpBtn1 {
	color: #ccc !important;
}

#device-license.left-right-part {
	display: flex;
	justify-content: space-around;
	align-items: stretch;
}

#device-license>.listPart {
	width: 200px !important;
	border: 1px solid $left-list-border;
	border-radius: 6px;
	padding: 10px;
	background: $left-list-back;
	box-shadow: $left-list-shadow;
}

#device-license>.listPart>.add {
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: flex-end;
	font-size: 20px;
	color: $add-icon-color;
}

#device-license>.listPart>.add>div {
	border-radius: 10px;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: $add-icon-back;
	box-shadow: $add-icon-shadow;
	transition: all .5s;
}

#device-license>.listPart>.add>div:hover {
	transform: rotate(180deg);
}

#device-license>.listPart>.previousPage,
#device-license>.listPart>.nextPage {
	width: 100%;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	text-align: center;
	color: $left-list-page;
	transition: all 0.3s;
}

#device-license>.listPart>.previousPage {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	margin-bottom: 5px;
}

#device-license>.listPart>.nextPage {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-top: 5px;
}

#device-license>.listPart>.previousPage:hover,
#device-license>.listPart>.previousPage:focus {
	color: $left-page-active-font;
	background-color: $left-page-active-back;
	box-shadow: $left-page-active-preshadow;
	// border: 1px solid #b3dcfb;
}

#device-license>.listPart>.nextPage:hover,
#device-license>.listPart>.nextPage:focus {
	color: $left-page-active-font;
	background-color: $left-page-active-back;
	box-shadow: $left-page-active-nextshadow;
	// border: 1px solid #b3dcfb;
}

#device-license>.listPart>.currentContent {
	height: calc(100% - 70px);
}

#device-license>.listPart>.currentContent>li span {
	width: calc(100% - 50px) !important;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
}

#device-license>.listPart>.currentContent>li {
	display: flex;
	justify-content: space-between;
	color: $left-list-font;
	padding-left: 5px;
	// height: 30px;
}

#device-license>.listPart>.currentContent>li.active-part {
	color: $left-list-font-active;
	background: $left-list-active-back;
	border: $left-list-active-border;
	font-size: 15px;
	font-weight: bold;
	text-shadow: $left-list-font-active-shadow;
}

.device-license>.listPart .active-part {}

#device-license>.listPart .toolsIcon {
	width: 25px;
	line-height: 30px;
	display: none;
}

#device-license>.listPart .updateIcon {
	color: $left-list-update;
}

#device-license>.listPart .updateIcon:hover {
	color: $left-list-update-active;
}

#device-license>.listPart .deleteIcon {
	color: $left-list-delete;
}

#device-license>.listPart .deleteIcon:hover {
	color: $left-list-delete-active;
}

#device-license>.listPart li:hover .toolsIcon {
	display: inline-block;
}

#device-license>.contentPart {
	width: calc(100% - 250px);
	border: 1px solid $right-list-border;
	border-radius: 5px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	background: $right-content-back;
	box-shadow: $right-content-shadow;
	// justify-content: space-around;
}

#device-license .one-part {
	width: calc(100% - 20px);
	padding: 10px;
	height: 30%;
	flex-shrink: 0;
	flex-grow: 1;
	min-height: 400px;
}

#device-license .one-part:not(:last-child) {
	// margin-bottom: 10px;
	border-bottom: 1px solid $right-split-border;
}

#device-license .one-part>.title {
	font-size: 14px;
	font-weight: bold;
	color: $right-font-title;
	height: 30px;
	// line-height: 30px;
}

#device-license .one-part>.other {
	height: calc(100% - 30px);
	width: 100%;
}

.left-pop {
	margin-left: 50px !important;
}

/*翻书*/
.fan {
	perspective: 150px;
	-moz-perspective: 150px;
	-ms-perspective: 150px;
	position: relative;
	width: 50px;
	height: 28px;
	margin: 0 auto;
}

.preserve-3d {
	/*使子元素保留3D位置*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.book-page .page-front {
	background-color: $book-page-f-back;
}

.flip-animation {
	animation: flipBook1 8s;
	-moz-animation: flipBook1 8s;
	/* Firefox */
	-webkit-animation: flipBook1 8s;
	/* Safari and Chrome */
	-o-animation: flipBook1 8s;
	/* Opera */
	animation-fill-mode: forwards;
}

.book-page p {
	margin-top: 2px;
	font-size: 12px;
	font-weight: bold;
	color: firebrick;
}

.book-page-box {
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.book-page {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 50px;
	border: 1px solid $book-page-border;
	text-align: center;
	background-color: $book-page-back;
	/* border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px; */
	border-radius: 6px;
}

@keyframes flipBook1 {
	0% {
		-webkit-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		-o-transform: rotateX(0deg);
		transform: rotateX(0deg);
	}

	100% {
		-webkit-transform: rotateX(-270deg);
		-ms-transform: rotateX(-270deg);
		-o-transform: rotateX(-270deg);
		transform: rotateX(-270deg);
	}
}

@-moz-keyframes flipBook1 {
	0% {
		-webkit-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		-o-transform: rotateX(0deg);
		transform: rotateX(0deg);
	}

	100% {
		-webkit-transform: rotateX(-270deg);
		-ms-transform: rotateX(-270deg);
		-o-transform: rotateX(-270deg);
		transform: rotateX(-270deg);
	}
}

@-webkit-keyframes flipBook1 {
	0% {
		-webkit-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		-o-transform: rotateX(0deg);
		transform: rotateX(0deg);
	}

	100% {
		-webkit-transform: rotateX(-270deg);
		-ms-transform: rotateX(-270deg);
		-o-transform: rotateX(-270deg);
		transform: rotateX(-270deg);
	}
}

@-o-keyframes flipBook1 {
	0% {
		-webkit-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		-o-transform: rotateX(0deg);
		transform: rotateX(0deg);
	}

	100% {
		-webkit-transform: rotateX(-270deg);
		-ms-transform: rotateX(-270deg);
		-o-transform: rotateX(-270deg);
		transform: rotateX(-270deg);
	}
}

.forbidBtn1 {
	.forbidBtn {
		color: #fff !important;
		background: green !important;
		border-color: green !important;
	}
}

#one-device .book-page {
	width: 60px;
}
#alarm-count .left-right-part>div{
		height: calc(50% - 20px);
		min-height: 300px;
		margin: 10px;
}
#alarm-count .left-right-part>.small-part {
	width: calc(33% - 20px);
}

#alarm-count .left-right-part>.part-only-one {
	width: calc(100% - 20px);
}
.minute-part .oneother {
	top: -320px !important;
}
.minute-part .oneother {
	top: -320px !important;
}

.hour-part .oneother {
	top: -200px !important;
}

.day-part .oneother {
	top: -240px !important;
}
.month-part .oneother {
	top: -170px !important;
}